<template>
  <div class="nav-btn">
    <div class="nav-row" :class="{'active':currIndex===item.value}" v-for="(item,i) in data" :key="i" 
			@click="onClick(item.value)">{{item.label}}</div>
  </div>
</template>
<script>
export default {
  props: {
    cur: {//当前选项
      default: ()=>{
        if (this.data.length > 0) {
          return this.data[0].value
        } else {
          return ''
        }
      }
    },
    data: {
      type: Array,
      default: ()=> {
        return []
      }
    }
  },
  data () {
    return {
      currIndex: this.cur
    }
  },
  methods: {
    onClick (val) {
      this.currIndex = val
      this.$emit('update:cur', val)
      this.$emit('onClick')
    }
  }
}
</script>
<style lang="scss" scoped>
.nav-btn {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
  .nav-row {
		width: 155px;
		height: 38px;
    margin: 0 5px;
    font-size: 20px;
    line-height: 34px;
    color: #FFFFFF;
    text-align: center;    
    cursor: pointer;
    &.active {
     background-image: url('~@/assets/img/button2_active.png');
     
    }
  }
}
</style>
